

<!--授予角色权限-->
<template>
  <div class="wrapper-container" style="width:100%">
    <div
      class="search-container"
      style="justify-content: space-between !importan;margin:0"
    >
      <div class="search-container-item">
        <span style="color: #004ca7;margin-top: 5px;">学期：</span>
      <el-select
        v-model="xq"
        style="width: 90px"
        size="mini"
        placeholder="请选择"
      >
        <el-option
          v-for="item in systemList"
          :key="item.value"
          :label="item.xqmc"
          :value="item.xqmc"
        >
        </el-option>
      </el-select>
      </div>
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        style="width: 100%"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
      >
        
        <el-table-column v-if ="!yesOrNotFlag" prop="permission" label="权限" align="center">
        </el-table-column>
          <el-table-column  v-else prop="qx" label="权限" align="center">
        </el-table-column>

        <el-table-column v-if="!item"  prop="xb" label="系" align="center">
          <template slot-scope="scope"    v-if ="!yesOrNotFlag">
        
              <el-select
            v-model="scope.row.system"
            style="width: 90px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in zsxbList"
              :key="item.value"
              :label="item.deptName"
              :value="item.deptName"
            >
            </el-option>
          </el-select>
          </template>
        </el-table-column>

        <el-table-column v-if="!item" prop="role1" label="被授予角色" align="center">
          <template slot-scope="scope"   v-if ="!yesOrNotFlag">
            <SelectItem
              v-if="!yesOrNotFlag"
              :name="''"

              :value="scope.row.role"
              @change="
                (e) => {
                  scope.row.role = e;
                }
              "
              :xqList="roleList"
            ></SelectItem>
          </template>
        </el-table-column>

        <el-table-column v-if="!item" prop="people"  label="被授予人" align="center">
          <template slot-scope="scope"   v-if ="!yesOrNotFlag">
            <SelectItem
              v-if="!yesOrNotFlag"
              :name="''"

              :value="scope.row.xm"
              @change="
                (e) => {
                  scope.row.xm = e;
                }
              "
              :xqList="teacherList"
            ></SelectItem>
          </template>
        </el-table-column>

        <el-table-column v-if="yesOrNotFlag"  prop="juese" label="被授予角色" align="center">
        </el-table-column>
         <el-table-column v-if="yesOrNotFlag"  prop="teachername" label="被授予人" align="center">
        </el-table-column>
         <el-table-column v-if="yesOrNotFlag"  prop="xb" label="系" align="center">
        </el-table-column>
        
        <el-table-column v-if="yesOrNotFlag" label="操作" align="center" >
          <template slot-scope="scope">
            <div class="search-button" style="width:80px;margin: 0 auto;color: #ff3819;
                border: 1px solid #ff3819;
                background: #ffefef;">
              <span @click="pjauthorityremove1(scope.$index)" style="color:#ff3819">删 除</span>
            </div>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <div
      v-if="!yesOrNotFlag"
      class="search-container"
      style="display: flex; justify-content: center !important"
    >
      <div class="search-button" style="width:80px;margin: 0 auto;
              color: #f3b815;
              border: 1px solid #f3b815;
              background: #fff6ef">
        <span @click="pjauthoritysave" style="color:#f3b815;font-size:15px">授 权</span>
      </div>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="showMessageDialog"
      width="983px"
      style=" height:520px"
      class="message-container"
    >
      <div class="message-text">
        <div v-if="this.namelist.plan"></div>
        <div v-else>确定要删除吗？</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="pjauthorityremove('Message')">确 定</button>
      </span>
      <span slot="footer" class="dialog-footer" style="margin-left:65px">
        <button class="yellow" @click="dialogClickconfirm('Message')">取 消</button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { zsxbselset } from "@/api/professional/details";
import { reqGetXqList } from "@/api/course/courses";
import SelectItem from "../../../components/SelectItem.vue";
import ButtonItem from "../../../components/ButtonItem.vue";
import {teacherinfoSelectAll} from "../../../api/evaluation/setActivityEvaluations";
import {pjauthorityremove, pjauthoritysave} from "../../../api/teacher/supervision";
import {updateinfoSelectAll} from "../../../api/teacher/admin";
export default {
  components: {
    SelectItem,
    ButtonItem,
  },
  data() {
    return {
      id:'',
      index:'',
      item:false,
      namelist: {},
      showMessageDialog:false,
      yesOrNotFlag: false,
      radio4: "授予角色权限",
      xq: "",
      systemList: [],
      system:'',
      role:'',
      roleList: [
        {
          value: "教研室主任",
          label: "教研室主任,id",
        },
        {
          value: "队长",
          label: "队长",
        },
        {
          value: "大队长",
          label: "大队长",
        },
        {
          value: "系领导",
          label: "系领导",
        },
        {
          value: "教科处领导",
          label: "教科处领导",
        },
        {
          value: "管理员",
          label: "管理员",
        },
        {
          value: "无",
          label: "无",
        },
      ],
      teacherName: "",
      peopleList: [],
      peopleText: "被授予人",

      xm:'',
      teacherList: [
        {
          value:'',
          label:'',
        }
      ],
      tableData: [
        {
          id:'',
          permission: "专业课",
          system: "",
          role: "",
          xm: "",
        },
        {
          id:'',
          permission: "通识课",
          system: "",
          role: "",
          xm: "",
        },
        {
          id:'',
          permission: "教员平均得分",
          system: "",
          role: "",
          xm: "",
        },
        {
          id:'',
          permission: "整体分析(数据分布)",
          system: "",
          role: "",
          xm: "",
        },
        {
          id:'',
          permission: "整体分析(专业课通识课分布)",
          system: "",
          role: "",
          xm: "",
        },
      ],
    };
  },
  mounted() {
    this.zsxbselset();
    this.getXqList();
    this.teacherinfoSelectAll()
    if (this.$route.query.yesOrNotFlag) {
      this.yesOrNotFlag = true;
    }
  },
  methods: {
     zsxbselset() {
      zsxbselset().then(res => {
        this.zsxbList = res.data.data;
        console.log(this.zsxbList, "555");
      });
    },
  // 获取学期院历列表
    async getXqList() {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        this.systemList = result.data.data;
      }
    },
    // updateinfoSelectAll(){
    //   if(this.yesOrNotFlag = true){
    //     return new Promise(() => {
    //       let Trem=this.xq
    //       updateinfoSelectAll(Trem).then(res => {
    //          this.tableData = res.data.data
    //          this.item = true
    //         console.log(res.data.data)
    //         console.log( this.tableData)
    //       })
    //     })
    //   }
    // },
  //查询所有教员姓名
    teacherinfoSelectAll(){
      return new Promise(() => {
        teacherinfoSelectAll().then(res => {
          console.log("sssssssssss")
          console.log(res.data.data)
          console.log("sssssssssss")
          if (res.data.code === 200) {
            let datateach = res.data.data
            let arr = []
            for (const dataKey in datateach) {
              let obj = {...datateach[dataKey]}
              obj = {
                value: obj.xm+','+obj.id,//obj.guiderankoption
                label: obj.xm+','+obj.id,
                id:obj.id,
                xm:obj.xm,
              }
              arr.push(obj)
              console.log("111111111")
              console.log(obj)
              console.log("eeeee111111111")
            }
            this.teacherList = arr
          }
        })
      })
    },

    updateinfoSelectAll(){
      if(this.yesOrNotFlag = true){
        return new Promise(() => {
          let Trem = this.xq;
          updateinfoSelectAll(Trem).then(res => {
          })
        })
      }
    },


  //  添加授权角色
  pjauthoritysave(){
    const arrs = JSON.parse(JSON.stringify(this.tableData).replace(/permission/g, 'qx').replace(/role/g, 'juese').replace(/system/g, 'xb'))
    arrs.forEach(tem => {
      tem.trem = this.xq;
    })
      let obj = {
        arrs
      }
      console.dir(obj)
      console.log(obj)
    return new Promise(() => {
      pjauthoritysave(obj).then(res => {
        console.log(res.status)
        if (res.status === 200) {
          this.yesOrNotFlag=true

            console.log(this.item)

           this.updateinfoSelectAll()

         // this.$router.push("this.$route.query.yesOrNotFlag");
        }
      })
    })
  },


  //  删除被授权的角色
    pjauthorityremove1(index) {
      if(this.yesOrNotFlag = true) {
          this.id =  this.tableData[index].id
          console.log(" this.id", this.id)
          this.showMessageDialog = true
      }
    },
    pjauthorityremove() {
        let ids = this.id
        console.log(" this.id====删除============", this.id)
        return new Promise(() => {
          pjauthorityremove(ids).then(res => {
            if (res.data.code == 200) {
              this.tableData = res.data.data
              this.$message.success('删除成功')
              this.showMessageDialog = false
              this.updateinfoSelectAll()
            }
          })
        })
    },
    dialogClickconfirm(type) {
      let obj = {}
      if (type === 'Message') {
        this.showMessageDialog = !this.showMessageDialog
      } else if (type === 'Rename') {
        obj.id = this.namelist.id
        obj.status = '0'
        this.showRenameDialog = !this.showRenameDialog
        this.getUpdate(obj)
      }
    }

  },

};
</script>
<style lang="less" scoped>
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  // margin: 15px 0;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
.message-container {
  .message-text {
    > div {
      padding: 57px 0 63px 0;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
      text-align: center;
    }
  }

  .el-dialog__footer {
    padding-bottom: 95px;
    display: flex;
    justify-content: space-evenly;
  }
}


.search-container {
  justify-content: flex-start !important;
}

.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}

.table-container {
  margin-top: 15px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/special.less";
.table-container::v-deep .el-table__header th {
  border-color: #c7d7eb !important;
  padding-left: 10px;
}
.filter-button::v-deep .el-radio-button .el-radio-button__inner {
  border-radius: 6px !important;
  border: 1px solid #02c86c;
  color: #02c86c;
  background-color: #dfffef;
}
.filter-button::v-deep
.el-radio-button__orig-radio:checked
+ .el-radio-button__inner {
  border: 1px solid #02c86c;
  color: white;
  background-color: #02c86c;
}
.wrapper-container {
  width: 1711px;
  margin: 0 auto;
}
.table-container {
  margin-top: 15px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
